<template>
  <div class="options-wrap">
    <ul class="option-list">
      <router-link to="/nearby/enjoy" class="option-item" tag="li">
        享美食
      </router-link>
      <router-link to="/nearby/discounts" class="option-item" tag="li">
        惠生活
      </router-link>
      <router-link to="/nearby/play" class="option-item" tag="li">
        爱玩乐
      </router-link>
      <router-link to="/nearby/hotel" class="option-item" tag="li">
        住酒店
      </router-link>
      <router-link to="/nearby/all" class="option-item" tag="li">
        全部
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'OptionTab'
}
</script>

<style lang="stylus" scoped>
  @import '~stylus/mixins.styl'
  .options-wrap
    padding()
    padding-top 15px
    .option-list
      display flex
      justify-content space-between
      margin-bottom 19px
      .option-item
        font-size 24px
        color #525252
        line-height 57px
        width 20%
        ellipsis()
        text-align center
        position relative
      .router-link-active
        color #078FFF
      .router-link-active::before
        content '' !important
        height 2px
        width 32px
        position absolute
        bottom 0px
        background-color #078FFF
        left 50%
        transform translateX(-50%)
</style>
